<!DOCTYPE html>
<html lang="zh_Ch">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  
  
  <title>JS常用 | Blog</title>
  
  <meta name="author" content="Sun Liusen" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="前端" />
  
  <meta name="description" content="正则 去掉字符串里的html123let reg &#x3D; &#x2F;(&lt;([^&gt;]+)&gt;)&#x2F;ig;let str &#x3D; &quot;&lt;p&gt;看一下内容&lt;&#x2F;p&gt;&quot;;console.log(str.replace(reg,&quot;&quot;));&#x2F;&#x2F;替换成空 校验是否是手机号和固定电话1234let reg1 &#x3D; &#x2F;^1[3456789]\d&amp;#123;9&amp;#">
<meta property="og:type" content="article">
<meta property="og:title" content="JS常用">
<meta property="og:url" content="https://slsandxr.top/2023/03/28/JS/JS%E5%B8%B8%E7%94%A8/index.html">
<meta property="og:site_name" content="Blog">
<meta property="og:description" content="正则 去掉字符串里的html123let reg &#x3D; &#x2F;(&lt;([^&gt;]+)&gt;)&#x2F;ig;let str &#x3D; &quot;&lt;p&gt;看一下内容&lt;&#x2F;p&gt;&quot;;console.log(str.replace(reg,&quot;&quot;));&#x2F;&#x2F;替换成空 校验是否是手机号和固定电话1234let reg1 &#x3D; &#x2F;^1[3456789]\d&amp;#123;9&amp;#">
<meta property="og:locale" content="zh_CH">
<meta property="article:published_time" content="2023-03-28T10:26:14.000Z">
<meta property="article:modified_time" content="2024-12-16T11:07:04.231Z">
<meta property="article:author" content="Sun Liusen">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" media="all"></script>
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-color-dark.min.css" media="(prefers-color-scheme: dark)"></script>
    <script src="/js/kr-dark.min.js"></script>
  
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" media="all"></script>
  
  <link rel="stylesheet" id="fontawe-css" href="/vendors/font-awesome@4.7.0/css/font-awesome.min.css" media="all"></script>
  <link rel="stylesheet" id="nprogress-css" href="/vendors/nprogress@0.2.0/nprogress.css" media="all"></script>
  
  
    <link rel="stylesheet" href="/vendors/aplayer@1.10.1/dist/APlayer.min.css"></script>
  
  
    <link rel="stylesheet" href="/vendors/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"></script>
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="/vendors/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="/vendors/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
    
  </style>
  
<meta name="generator" content="Hexo 6.3.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">Blog</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>Blog</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article itemscope itemtype="https://schema.org/Article">
    
    <link itemprop="mainEntityOfPage" href="https://slsandxr.top/2023/03/28/JS/JS%E5%B8%B8%E7%94%A8/">
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center" itemprop="name headline">JS常用</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><time datetime="2023-03-28T10:26:14.000Z" itemprop="datePublished"><i class="fa fa-calendar"></i> 2023-03-28</time></li>
                <li itemprop="author" itemscope itemtype="https://schema.org/Person">
                    <i class="fa fa-user"></i> 作者 <span itemprop="name">Sun Liusen</span>
                </li>
                
                    <li>
                        <i class="fa fa-edit"></i> 
                        
                        
                            ~6.63K
                        
                        字
                    </li>
                
                
            </ul>
        </header>
        <div class="kratos-post-content">
            
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                <div class="icon"><i class="fa fa-warning"></i></div>
                <div class="text"><p>本文最后编辑于 <time datetime="1734347224231"></time> 前，其中的内容可能需要更新。</p></div>
            </div>
            
            
            
            <hr />
            <div itemprop="articleBody"><h2 id="正则"><a href="#正则" class="headerlink" title="正则"></a>正则</h2><ol>
<li>去掉字符串里的html<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let reg = /(&lt;([^&gt;]+)&gt;)/ig;</span><br><span class="line">let str = &quot;&lt;p&gt;看一下内容&lt;/p&gt;&quot;;</span><br><span class="line">console.log(str.replace(reg,&quot;&quot;));//替换成空</span><br></pre></td></tr></table></figure></li>
<li>校验是否是手机号和固定电话<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let reg1 = /^1[3456789]\d&#123;9&#125;$/; //手机号</span><br><span class="line">let reg2 = /^((0\d&#123;2,3&#125;)-)?(\d&#123;7,8&#125;)$/; //固定电话	</span><br><span class="line">reg1.test(&quot;18733842561&quot;); //true</span><br><span class="line">reg2.test(&quot;010-85067213&quot;); //true</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="时间"><a href="#时间" class="headerlink" title="时间"></a>时间</h2><ol>
<li>时间转换格式<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">dateFormat(fmt, date) &#123;</span><br><span class="line">	let ret;</span><br><span class="line">	const opt = &#123;</span><br><span class="line">		&quot;Y+&quot;: date.getFullYear().toString(), // 年</span><br><span class="line">		&quot;m+&quot;: (date.getMonth() + 1).toString(), // 月</span><br><span class="line">		&quot;d+&quot;: date.getDate().toString(), // 日</span><br><span class="line">		&quot;H+&quot;: date.getHours().toString(), // 时</span><br><span class="line">		&quot;M+&quot;: date.getMinutes().toString(), // 分</span><br><span class="line">		&quot;S+&quot;: date.getSeconds().toString() // 秒</span><br><span class="line">		// 有其他格式化字符需求可以继续添加，必须转化成字符串</span><br><span class="line">	&#125;;</span><br><span class="line">	for (let k in opt) &#123;</span><br><span class="line">		ret = new RegExp(&quot;(&quot; + k + &quot;)&quot;).exec(fmt);</span><br><span class="line">		if (ret) &#123;</span><br><span class="line">			fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, &quot;0&quot;)))</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	return fmt;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>时间差计算<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">function time(date1,date2)&#123;</span><br><span class="line">	let numb = date2.getTime() - date1.getTime();</span><br><span class="line">	let min = numb/1000/60;</span><br><span class="line">	let s = numb/1000;</span><br><span class="line">	let hours = numb/1000/60/60;</span><br><span class="line">	let day = numb/1000/60/60/24;</span><br><span class="line">	let mon = numb/1000/60/60/24/30;  //30天为一月</span><br><span class="line">	if(mon&gt;1)</span><br><span class="line">		return `$&#123;Math.ceil(numb)&#125;月`;</span><br><span class="line">	else if(day&gt;1)</span><br><span class="line">		return `$&#123;Math.ceil(day)&#125;天`;</span><br><span class="line">	else if(hours&gt;1)</span><br><span class="line">		return `Math.ceil(hours)小时`;</span><br><span class="line">	else if(min&gt;1)</span><br><span class="line">		return `$&#123;Math.ceil(min)&#125;分`;</span><br><span class="line">	else </span><br><span class="line">		return `$&#123;Math.ceil(s)&#125;秒`;</span><br><span class="line">&#125;;</span><br><span class="line">let str = time(new Date(&#x27;2013/04/02 18:00&#x27;),new Date(&#x27;2013/04/03 18:02&#x27;));</span><br><span class="line">alert(str)</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="常用的CSS"><a href="#常用的CSS" class="headerlink" title="常用的CSS"></a>常用的CSS</h2><ol>
<li>文字溢出省略号<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">display: -webkit-box;</span><br><span class="line">overflow: hidden;</span><br><span class="line">white-space: normal !important;</span><br><span class="line">text-overflow: ellipsis;</span><br><span class="line">word-wrap: break-word;</span><br><span class="line">-webkit-line-clamp: 3;  //行数</span><br><span class="line">-webkit-box-orient: vertical</span><br></pre></td></tr></table></figure></li>
<li>不允许复制和选中<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">-webkit-touch-callout: none; /* iOS Safari */</span><br><span class="line">-webkit-user-select: none; /* Chrome/Safari/Opera */</span><br><span class="line">-khtml-user-select: none; /* Konqueror */</span><br><span class="line">-moz-user-select: none; /* Firefox */</span><br><span class="line">-ms-user-select: none; /* Internet Explorer/Edge */</span><br><span class="line">user-select: none; /* Non-prefixed version, currently</span><br><span class="line">not supported by any browser */</span><br></pre></td></tr></table></figure></li>
<li>不允许选中点击<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pointer-events: none;</span><br></pre></td></tr></table></figure></li>
</ol>
<h2 id="Base64和File-互转"><a href="#Base64和File-互转" class="headerlink" title="Base64和File 互转"></a>Base64和File 互转</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line"> * Base64 转 File</span><br><span class="line"> * @param base64 String base64格式字符串</span><br><span class="line"> * @param filename String 文件名称或者文件路径</span><br><span class="line"> * @param contentType String file对象的文件类型，如：&quot;image/png&quot;</span><br><span class="line"> */</span><br><span class="line"> export function base64ToFile(base64, filename, contentType)&#123;</span><br><span class="line">     var arr = base64.split(&#x27;,&#x27;)  //去掉base64格式图片的头部</span><br><span class="line">     var bstr = atob(arr[1])   //atob()方法将数据解码</span><br><span class="line">     var leng = bstr.length</span><br><span class="line">     var u8arr = new Uint8Array(leng)</span><br><span class="line">     while(leng--)&#123;</span><br><span class="line">        u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码</span><br><span class="line">     &#125;</span><br><span class="line">     return new File([u8arr], filename, &#123;type:contentType&#125;) </span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">/**</span><br><span class="line">* Base64转Blob</span><br><span class="line">* @param base64 String base64格式字符串</span><br><span class="line">* @param contentType String blob对象的文件类型，如：&quot;image/png&quot;</span><br><span class="line">*/</span><br><span class="line">function base64ToBlob(base64, contentType)&#123;</span><br><span class="line">	var arr = base64.split(&#x27;,&#x27;)  //去掉base64格式图片的头部</span><br><span class="line">	var bstr = atob(arr[1])   //atob()方法将数据解码</span><br><span class="line">	var leng = bstr.length</span><br><span class="line">	var u8arr = new Uint8Array(leng)</span><br><span class="line">	while(leng--)&#123;</span><br><span class="line">		u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码</span><br><span class="line">	&#125;</span><br><span class="line">	var blob = new Blob([u8arr],&#123;type:contentType&#125;)</span><br><span class="line">	var blobImg = &#123;&#125;</span><br><span class="line">	blobImg.url = URL.createObjectURL(blob )  //创建URL,</span><br><span class="line">	blobImg.name = new Date().getTime() + &#x27;.png&#x27;</span><br><span class="line">	return blobImg</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">/**</span><br><span class="line"> * File 转 Base64</span><br><span class="line"> * @param file Object 文件对象流</span><br><span class="line"> */</span><br><span class="line"> export function fileToBase64(file)&#123;</span><br><span class="line">	return new Promise((resolve) =&gt; &#123;</span><br><span class="line">		var reader = new FileReader()</span><br><span class="line">		reader.readAsDataURL(file)  </span><br><span class="line">		//读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件</span><br><span class="line">		reader.onload = function(e)&#123;</span><br><span class="line">			resolve(e.target.result)</span><br><span class="line">		&#125;</span><br><span class="line">     &#125;)</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">/**</span><br><span class="line">* Blob 转 Base64</span><br><span class="line">* @param blob Object blob对象</span><br><span class="line">*/</span><br><span class="line">export function blobToBase64(blob)&#123;</span><br><span class="line">	return new Promise((resolve) =&gt; &#123;</span><br><span class="line">		var reader = new FileReader()</span><br><span class="line">		reader.readAsDataURL(blob)  </span><br><span class="line">		//读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件</span><br><span class="line">		reader.onload = function(e)&#123;</span><br><span class="line">			resolve(e.target.result)</span><br><span class="line">		&#125;</span><br><span class="line">     &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="a标签下载"><a href="#a标签下载" class="headerlink" title="a标签下载"></a>a标签下载</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">const a = document.createElement(&#x27;a&#x27;);//创建a标签</span><br><span class="line">a.setAttribute(&#x27;download&#x27;, &#x27;&#x27;);// 名字</span><br><span class="line">a.setAttribute(&#x27;href&#x27;, &#x27;&#x27;);// href链接</span><br><span class="line">a.click();					 // 自执行点击事件</span><br><span class="line">document.body.appendChild(a);//插入body里</span><br><span class="line">document.body.removeChild(a);//从body删除</span><br><span class="line">URL.revokeObjectURL(href); //清除url缓存</span><br></pre></td></tr></table></figure>

<h2 id="slice数组删除某个点击的值"><a href="#slice数组删除某个点击的值" class="headerlink" title="slice数组删除某个点击的值"></a>slice数组删除某个点击的值</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[...arr.slice(0, index), ...arr.slice(index + 1, this.detailImage.length)]</span><br></pre></td></tr></table></figure>

<h2 id="不允许复制和选中"><a href="#不允许复制和选中" class="headerlink" title="不允许复制和选中"></a>不允许复制和选中</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">div,p,span &#123;</span><br><span class="line">	</span><br><span class="line">	-webkit-touch-callout: none; /* iOS Safari */</span><br><span class="line">	</span><br><span class="line">	-webkit-user-select: none; /* Chrome/Safari/Opera */</span><br><span class="line">	</span><br><span class="line">	-khtml-user-select: none; /* Konqueror */</span><br><span class="line">	</span><br><span class="line">	-moz-user-select: none; /* Firefox */</span><br><span class="line">	</span><br><span class="line">	-ms-user-select: none; /* Internet Explorer/Edge */</span><br><span class="line">	</span><br><span class="line">	user-select: none; /* Non-prefixed version, currently</span><br><span class="line">	</span><br><span class="line">	not supported by any browser */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="文字超出省略号"><a href="#文字超出省略号" class="headerlink" title="文字超出省略号"></a>文字超出省略号</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">    display: -webkit-box;</span><br><span class="line">    overflow: hidden;</span><br><span class="line">    white-space: normal !important;</span><br><span class="line">    text-overflow: ellipsis;</span><br><span class="line">    word-wrap: break-word;</span><br><span class="line">    -webkit-line-clamp: 3;  //行数</span><br><span class="line">    -webkit-box-orient: vertical</span><br><span class="line">//通用</span><br><span class="line">white-space:nowrap;</span><br><span class="line">word-break:break-all;</span><br><span class="line">text-overflow:ellipsis;</span><br></pre></td></tr></table></figure>

<h2 id="pre标签自动换行样式"><a href="#pre标签自动换行样式" class="headerlink" title="pre标签自动换行样式"></a>pre标签自动换行样式</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">margin: 0;  </span><br><span class="line">white-space: pre-wrap;</span><br><span class="line">word-wrap: break-word;</span><br></pre></td></tr></table></figure>

<h2 id="随机生成验证码"><a href="#随机生成验证码" class="headerlink" title="随机生成验证码"></a>随机生成验证码</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">const createCode = obj =&gt;&#123;</span><br><span class="line">	let code = &quot;&quot;;</span><br><span class="line">	let codeLength = obj.numb||4; //验证码的长度 默认4 </span><br><span class="line">	let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, &#x27;A&#x27;, &#x27;B&#x27;, &#x27;C&#x27;, &#x27;D&#x27;, &#x27;E&#x27;, &#x27;F&#x27;, &#x27;G&#x27;, &#x27;H&#x27;, &#x27;I&#x27;, &#x27;J&#x27;, &#x27;K&#x27;, &#x27;L&#x27;, &#x27;M&#x27;, &#x27;N&#x27;, &#x27;O&#x27;, &#x27;P&#x27;, &#x27;Q&#x27;, &#x27;R&#x27;,</span><br><span class="line">		&#x27;S&#x27;, &#x27;T&#x27;, &#x27;U&#x27;, &#x27;V&#x27;, &#x27;W&#x27;, &#x27;X&#x27;, &#x27;Y&#x27;, &#x27;Z&#x27;); //随机数  </span><br><span class="line">	for(let i = 0; i &lt; codeLength; i++) &#123; //循环操作  </span><br><span class="line">		let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）  </span><br><span class="line">		code += random[index]; //根据索引取得随机数加到code上  </span><br><span class="line">	&#125;</span><br><span class="line">	return code; //把code值赋给验证码  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="hash路由模式-解析url中”-”开头-结束的参数"><a href="#hash路由模式-解析url中”-”开头-结束的参数" class="headerlink" title="hash路由模式 解析url中”?”开头#结束的参数"></a>hash路由模式 解析url中”?”开头#结束的参数</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function GetRequest() &#123;</span><br><span class="line">	var url = location.search; //获取url中&quot;?&quot;符后的字串</span><br><span class="line">	var theRequest = new Object();</span><br><span class="line">	if (url.indexOf(&quot;?&quot;) != -1) &#123;</span><br><span class="line">		var str = url.substr(1);</span><br><span class="line">		var strs = str.split(&quot;&amp;&quot;);</span><br><span class="line">		for (var i = 0; i &lt; strs.length; i++) &#123;</span><br><span class="line">			theRequest[strs[i].split(&quot;=&quot;)[0]] = unescape(strs[i].split(&quot;=&quot;)[1]);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	return theRequest</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div>
        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5 itemprop="copyrightNotice">本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://slsandxr.top/2023/03/28/JS/JS%E5%B8%B8%E7%94%A8/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://slsandxr.top/2023/03/28/JS/JS%E5%B8%B8%E7%94%A8/";
            const title         = "「JS常用」";
            const excerpt       = `正则
去掉字符串里的html123let reg = /(&lt;([^&gt;]+)&gt;)/ig;let str = &quot;&lt;p&gt;看一下内容&lt;/p&gt;&quot;;console.log(str.re...`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a>
                </div>
                <div class="pull-date">
                    <time datetime="2024-12-16T11:07:04.231Z" itemprop="dateModified">最后编辑：2024-12-16</time>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" PETS-3" href="/2023/03/28/全国公共英语等级考试PETS三级/PETS-3-笔记-1/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" Node自动发布到测试服务器替换目录文件" href="/2023/04/26/Node自动发布到测试服务器替换目录文件/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="/images/avatar.webp" loading="lazy" decoding="auto" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center">孙刘森的博客</p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                34
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                11
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                18
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Js/">Js</a><span class="category-list-count">12</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/PETS-3/">PETS-3</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Tools/">Tools</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/UniCloud/">UniCloud</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AD%99%E5%88%98%E6%A3%AE%E7%9A%84%E8%B4%A6%E6%9C%AC/">孙刘森的账本</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%AE%89%E5%8D%93/">安卓</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">微信小程序</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/">我的博客</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%8E%92%E5%BF%A7%E8%A7%A3%E9%9A%BE/">排忧解难</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%9C%8D%E5%8A%A1%E5%99%A8/">服务器</a><span class="category-list-count">12</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%A7%8D%E5%AD%90/">种子</a><span class="category-list-count">1</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Docker/" style="font-size: 0.6em;">Docker</a> <a href="/tags/Java/" style="font-size: 0.6em;">Java</a> <a href="/tags/Linux/" style="font-size: 0.73em;">Linux</a> <a href="/tags/Mindway-js/" style="font-size: 0.6em;">Mindway.js</a> <a href="/tags/Mysql/" style="font-size: 0.6em;">Mysql</a> <a href="/tags/Nginx/" style="font-size: 0.67em;">Nginx</a> <a href="/tags/Node/" style="font-size: 0.6em;">Node</a> <a href="/tags/PETS-3/" style="font-size: 0.6em;">PETS-3</a> <a href="/tags/UniCloud/" style="font-size: 0.6em;">UniCloud</a> <a href="/tags/Vue3/" style="font-size: 0.6em;">Vue3</a> <a href="/tags/apk/" style="font-size: 0.6em;">apk</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 0.8em;">前端</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E5%AD%98%E5%82%A8/" style="font-size: 0.6em;">前端存储</a> <a href="/tags/%E5%AD%99%E5%88%98%E6%A3%AE%E7%9A%84%E8%B4%A6%E6%9C%AC/" style="font-size: 0.6em;">孙刘森的账本</a> <a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size: 0.67em;">工具</a> <a href="/tags/%E6%8E%92%E5%BF%A7%E8%A7%A3%E9%9A%BE/" style="font-size: 0.6em;">排忧解难</a> <a href="/tags/%E7%A7%8D%E5%AD%90/" style="font-size: 0.6em;">种子</a> <a href="/tags/%E9%80%82%E9%85%8D/" style="font-size: 0.6em;">适配</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2024/06/06/JS/%E9%80%82%E9%85%8D%E4%BB%A3%E7%A0%81/"><i class="fa  fa-book"></i> 前端rem适配代码</a>
            
          
        
          
          
            <a class="list-group-item" href="/2023/10/07/JS/canvas%E5%AE%9E%E7%8E%B0%E7%9B%96%E7%AB%A0/"><i class="fa  fa-book"></i> canvas实现盖章</a>
            
          
        
          
          
            <a class="list-group-item" href="/2023/08/31/JS/Js-sku%E5%95%86%E5%93%81%E8%A7%84%E5%88%99/"><i class="fa  fa-book"></i> Js-sku商品规则</a>
            
          
        
          
          
            <a class="list-group-item" href="/2023/07/28/%E6%8E%92%E5%BF%A7%E8%A7%A3%E9%9A%BE/"><i class="fa  fa-book"></i> 排忧解难</a>
            
          
        
          
          
            <a class="list-group-item" href="/2023/07/25/JS/Js%E5%AE%9E%E7%8E%B0%E8%A7%A3%E6%9E%90gif%E5%8A%A8%E5%9B%BE%E5%92%8C%E5%90%88%E6%88%90gif%E5%8A%A8%E5%9B%BE/"><i class="fa  fa-book"></i> Js实现解析gif动图和合成gif动图</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        <!-- Keep for compatibility -->
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        <!-- New links -->
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2024 Blog 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by Sun Liusen.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="/vendors/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="/vendors/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="/vendors/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="/vendors/meting@2.0.1/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="playlist"
        id="3204190542"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="/vendors/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>